
<!DOCTYPE HTML>
<html>
<head>
    <title>SIMILE Widgets | Exhibit | Examples | Election 08</title>
    <link rel='stylesheet' href='http://www.simile-widgets.org/styles/common.css' type='text/css' />

    <link rel="exhibit/data" href="us-state-borders-coarse.json" />
    <link rel="exhibit/data" href="vote-for.json" />

    <script src="../api/exhibit-api.js"></script>
    <link rel="exhibit-extension" href="../api/extensions/map/map-extension.js" data-ex-apikey="AIzaSyCDO3EXWKJms5T38db48czFJZDunhYIzn8" />
    <!-- Replace the above apiKey with your own (this one will eventually stop working) -->

    <style>
        body {
            margin: 0;
            padding: 0;
            font-family: Arial, Helvetica; font-size: 10pt;
        }
        table { font-size: 100%; }
        #header {
            padding: 1em;
            font-size: 200%;
            background: #ccc;
            font-weight: bold;
        }
        #content {
            padding: 20px;
        }
    </style>
</head>
<body>
    <ul id="path">
      <li><a href="/">SIMILE Widgets</a></li>
      <li><a href="/exhibit/">Exhibit</a></li>
      <li><span>Election 08</span></li>
    </ul>

    <div id="content">
        <h1>Election 08</h1>

        <div data-ex-role="lens" style="display: none;">
            <div><b data-ex-content=".label"></b></div>
        </div>
        <table width="100%" cellspacing="15"><tr valign="top">
            <td>
                <div data-ex-role="coder" data-ex-coder-class="Color" id="vote-for-colors">
                    <span data-ex-color="#aa0000">McCain</span>
                    <span data-ex-color="#0000aa">Obama</span>
                    <span data-ex-color="#cccccc">Tossup</span>
                    <span data-ex-color="#ff4444">Leaning McCain</span>
                    <span data-ex-color="#4444ff">Leaning Obama</span>
                    <span data-ex-color="black">Unknown</span>
                </div>
                <div data-ex-role="view"
                    data-ex-view-class = "Map"
                    data-ex-polygon=".border"
                    data-ex-border-color="white"
                    data-ex-border-width="3"
                    data-ex-border-opacity="1"
                    data-ex-center="36.498367,-94.618156"
                    data-ex-map-height="600"
                    data-ex-latlng-pair-separator="|"
                    data-ex-color-key=".vote-for"
                    data-ex-color-coder="vote-for-colors"
                    data-ex-zoom="4"
                    >
                </div>
            </td>
            <td width="20%">
                <div data-ex-role="facet" data-ex-expression=".vote-for" data-ex-scroll="false"></div>
            </td>
        </tr></table>
    </div>
</body>
</html>
